

<!-- father controller -->
<section ng-controller="homeController as hc">
	<div ng-controller="foodController as fc">
		<div ng-controller="shoppingCartController as sc">
				<header>
						<div class="container">
							<div class="row top-header">
								<div class="col-sm-3 text-left">
									<a href="#" class="logo">
										<img src="http://10.222.29.165:3456/images/logo.png" alt="logo">
									</a>
								</div>				
							</div>
						</div>
						<div class="container">
							<div class="bg-mn color-inher">
								<div class="row m-0">
									<div class="col-sm-1 col-md-1 col-lg-2 p-0">
										<div class="dropdown category-bar">
											<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
												<i class="fa fa-bars"></i><span>Categories</span>
											</a>
											
										</div>
									</div>
									<div class="col-sm-8 col-md-8 col-lg-7 p-0">
										<div class="main-menu">
											<nav class="navbar navbar-default menu">
												<div class="navbar-header">
													<button type="button" class="navbar-toggle collapsed m-r-xs-15" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
														<span class="sr-only">Toggle navigation</span>
														<span class="icon-bar"></span>
														<span class="icon-bar"></span>
														<span class="icon-bar"></span>
													</button>
												</div>
												<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
													<ul class="nav navbar-nav"> 
															<li><a ui-sref="home">Home</a></li>
															<li><a ui-sref="login">Login</a></li>
															<li><a href="" ng-click="hc.loginOut()">Out</a></li>
															<li><a ui-sref="register">Register</a></li>
															<li><a ui-sref="/shoppingCart/calculate">Cart</a></li>
															<li><a ui-sref="order">MyHome</a></li>
													</ul>
												</div>
											</nav>
										</div>
									</div>	
									<div class="col-sm-3 col-md-3 col-lg-3 p-0">
										<div class="search-box m-l-xs-15 m-r-xs-15">
											<input type="text" class="form-item" placeholder="Search...">
											<button type="submit" class="fa fa-search"></button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</header>
					<!-- Banner -->
					
					<!-- strat -->
						<div id="myCarousel" class="carousel slide" style="margin-left:20%; margin-right:20%; margin-top:2%">
						<!-- 轮播（Carousel）指标 -->
						<ol class="carousel-indicators">
						<!-- 
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1"></li>
							<li data-target="#myCarousel" data-slide-to="2"></li>
							 -->
						  
							<!-- <c:forEach items="${advertisementVOs}" varStatus="status">
								<c:if test="${status.index ==0 }">
									<li data-target="#myCarousel" data-slide-to="${status.index}" class="active"></li>
								</c:if>
								<c:if test="${status.index > 0}">
									<li data-target="#myCarousel" data-slide-to="${status.index}"></li>
								</c:if>
								
							</c:forEach> -->
							
							
							
						</ol>   
						<!-- 轮播（Carousel）项目 -->
						
						<!-- <div class="carousel-inner">
							<c:forEach items="${advertisementVOs}" var="advertisementVO" varStatus="status" >
								<c:if test="${status.index == 0}">
									<div class="item active">
										<img src=${advertisementVO.foodImg } alt="First slide" style="width: 100%;height: 300px;">
										<div class="carousel-caption">热门</div>
									</div>
								</c:if>
								<c:if test="${status.index > 0}">
									<div class="item">
										<img src=${advertisementVO.foodImg } alt="Second slide" style="width: 100%;height: 300px;">
										   <div class="carousel-caption">标题 2</div>
										</div>
								</c:if>
								
							</c:forEach>
							 -->
						
						<!-- 轮播（Carousel）导航 -->
						<a class="carousel-control left" href="#myCarousel" 
							data-slide="prev" style="background-color: #BCEE68;
						background-repeat: repeat-x;
						width: 10%;
						padding-top: 13%;">&lsaquo;
						</a>
						<a class="carousel-control right" href="#myCarousel" 
							data-slide="next" style="background-color: #BCEE68;
						background-repeat: repeat-x;
						width: 10%;
						padding-top: 13%;">&rsaquo;
						</a>
					</div>
						
						<!-- end -->
					
					
					<!-- Product tabs -->
					<div>
						<div class="container text-center m-t-30">
							<h3 class="title f-30">Our Product</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>	
							<div class="ht-tabs ht-tabs-product text-center">
								<!-- Nav tabs -->
								<ul class="nav nav-tabs m-b-20" role="tablist">
								
				
										<li role="presentation" class="active">
												<a ng-click="hc.getAllMerchants()" aria-controls="tab-description" role="tab" data-toggle="tab">
													<p><img src="http://10.222.29.165:3456/images/foodtype/all.jpg" alt="image"></p> 所有</a>
											</li>
										<!-- <c:forEach items="${AllFoodTypes }" var="foodType"> -->
											<li role="presentation" class="active">
												<a ng-click="hc.getMerchantsByFoodType(1)" aria-controls="tab-description" role="tab" data-toggle="tab">
													<p><img src="http://10.222.29.156:3456/images/foodtype/jiushui.jpg"+ alt="image"></p> 酒水</a>
											</li>
					
											<li role="presentation" class="active">
												<a ng-click="hc.getMerchantsByFoodType(2)" aria-controls="tab-description" role="tab" data-toggle="tab">
													<p><img src="http://10.222.29.156:3456/images/foodtype/taocan.jpg"+ alt="image"></p> 套餐</a>
											</li>
					
											<li role="presentation" class="active">
												<a ng-click="hc.getMerchantsByFoodType(3)" aria-controls="tab-description" role="tab" data-toggle="tab">
													<p><img src="http://10.222.29.156:3456/images/foodtype/zhushi.jpg"+ alt="image"></p> 主食</a>
											</li>
					
											<li role="presentation" class="active">
												<a ng-click="hc.getMerchantsByFoodType(4)" aria-controls="tab-description" role="tab" data-toggle="tab">
													<p><img src="http://10.222.29.156:3456/images/foodtype/xiaochi.jpg"+ alt="image"></p> 小吃</a>
											</li>
										<!-- </c:forEach> -->
				
				
								
								</ul>
								<!-- Tab panes -->
								<div class="tab-content">
									<div role="tabpanel" class="tab-pane active" id="tab-description">
										
										
										<!-- 在这里添加商家信息 -->
										<div class="row" id="merchantsInfo">
											 <div ng-repeat="merchant in passMerchantsInfo" >
													<!-- 商家1 -->
													<div class="col-sm-6 col-md-4 col-lg-3">
															<!-- Product item -->
															<div class="product-item">
																<!-- 替换超链接 -->
																<!-- <a href="${merchant.username }/foods"> -->
																	<img src="{{merchant.portrait}}" alt="商家头像无法显示哦" />
																<!-- </a> -->
																<div class="product-caption">
																	<h4 class="product-name">
																		<!-- <a href=>{{merchant}}</a> -->
																	</h4>
																	<div class="product-price-group">
																		<span class="product-price"></span>
																	</div>
																	<div class="ht-btn-group">
																		<a href="#" class="wishlist_btn">
																			<i class="fa fa-heart-o"></i>
																		</a><!-- 用于后期拓展 -->
																		<input type="hidden" value={{merchant._id} > </input>
				
																		<button name="current_merchant_name" ng-click="hc.enterMerchantStore(merchant._id)">{{merchant.address}}</button> 
																		<br>
																		<button name="current_merchant_name" ng-click="hc.enterMerchantStore(merchant._id)">{{merchant.username}}</button>
																		
																			<a href="#" class="compare_btn"><i class="fa fa-exchange"></i></a>
																	</div>
																</div>
															</div>
														</div>	
										</div>
										</div>
									</div>
									<div role="tabpanel" class="tab-pane" id="tab-review">
									............
									</div>
								</div>
							</div>
						</div>
					</div>
				
				<!-- </div> -->
		</div>
	
	</div>

	

</section>
